import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import { observer } from 'mobx-react'
import store from '../../store'
import { toJS } from 'mobx'
import { DndContext, closestCenter, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'
import { arrayMove, SortableContext } from '@dnd-kit/sortable'
import SortableItem from './SortableItem'
import { putData } from '@/servers/http'
import { api } from '@/servers/api'
import { Toast } from 'antd-mobile'
import { isNullData } from '@/utils'

const ImageBox1 = () => {
    const { fileDetail, getFileDetail } = store || {}
    const [items, setItems] = useState<any[]>([])
    const sensors = useSensors(
        useSensor(MouseSensor, {
            activationConstraint: {
                distance: 10,
            },
        }),
        useSensor(TouchSensor, {
            activationConstraint: {
                delay: 250,
                tolerance: 5,
            },
        }),
    )

    useEffect(() => {
        if (Array.isArray(fileDetail.detail)) {
            console.log('detail', fileDetail.detail)
            setItems(toJS(fileDetail.detail))
        }
    }, [fileDetail.detail])
    /** 更新档案详情 */
    const updateFileDetail = (arr: any[]) => {
        const data = arr.map((item, index) => {
            const { id, url, name } = item || {}
            return {
                id,
                url,
                name,
                sort: index + 1,
            }
        })
        putData(`${api.userBarriersBatchUpdate}${fileDetail.id}`, { fill_type: 2, data })
            .then(() => {
                if (isNullData(data)) {
                    getFileDetail()
                }
            })
            .catch(() => {
                Toast.show('更新失败')
                setItems(fileDetail.detail)
                getFileDetail()
            })
    }
    // 拖拽完成
    const handleDragEnd = (event: { active: any; over: any }) => {
        const { active, over } = event
        if (active.id !== over.id) {
            const oldIndex = items.findIndex(i => i.id === active.id)
            const newIndex = items.findIndex(i => i.id === over.id)
            const resultArr = arrayMove(items, oldIndex, newIndex)
            setItems(resultArr)
            updateFileDetail(resultArr)
        }
    }
    // 删除元素
    const handleRemove = (item: any) => {
        const newArr = items.filter(i => i.id !== item.id)
        setItems(newArr)
        updateFileDetail(newArr)
    }

    return (
        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
            <SortableContext items={items}>
                <div className={styles.image_box}>
                    {items?.map(item => (
                        <SortableItem key={item.id} item={item} onRemove={() => handleRemove(item)} />
                    ))}
                </div>
            </SortableContext>
        </DndContext>
    )
}

export default observer(ImageBox1)
